<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>代码生成器</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div id="app">
	<div>
		<el-form :inline="true" v-model="form" size="mini">
			<el-row>
				<el-form-item label="数据库类型">
					 <el-radio-group v-model="form.dbType" @change="dbTypeChange">
						<el-radio label="MYSQL" border>MYSQL</el-radio>
						<el-radio label="ORACLE" border>ORACLE</el-radio>
					 </el-radio-group>
				</el-form-item>
				<el-form-item label="服务器地址">
					<el-input v-model="form.host"></el-input>
				</el-form-item>
				<el-form-item label="端口">
					<el-input v-model="form.port"></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="数据库">
					<el-input v-model="form.dbName"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item label="查询条件">
					<el-input v-model="form.queryTableName" placeholder="请输入表名"></el-input>
				</el-form-item>
				<el-button type="primary" size="mini" @click="searchTables">
					查询
				</el-button>
				<el-button type="primary" size="mini"  @click="dialogVisible = true">
					生成代码
				</el-button>
			</el-row>
		</el-form>
	</div>
	
	<div>
		<el-table :data="tableData" tooltip-effect="dark" @selection-change="selectionChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="表名" width="240"  prop="tableName"></el-table-column>
			<el-table-column label="备注" width="480"  prop="tableComment"></el-table-column>
			<el-table-column label="创建时间" width="480"  prop="createTime"></el-table-column>
		</el-table>
		<div style="text-align: center;">
			<el-pagination @next-click="currentPageChange" @prev-click="currentPageChange" @current-change="currentPageChange" :page-size="form.pageSize" layout="prev, pager, next" :total="total" :page-size="20"></el-pagination>
		</div>
	</div>
	
	<el-dialog title="生成信息" :visible.sync="dialogVisible" width="40%">
		<el-row>
			<el-form :inline="true" v-model="generateConfig" size="mini">
				<el-form-item label="模块名">
					<el-input v-model="generateConfig.moduleName"></el-input>
				</el-form-item>
				<el-form-item label="包名">
					<el-input v-model="generateConfig.packageName"></el-input>
				</el-form-item>
				<el-form-item label="表前缀">
					<el-input v-model="generateConfig.tablePrefix"></el-input>
				</el-form-item>
				<el-form-item label="作者">
					<el-input v-model="generateConfig.author"></el-input>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-button type="primary" size="mini"  @click="generateCode">
				确定生成
			</el-button>
		</el-row>
	</el-dialog>

</div>


<script src="js/vue.min.js"></script>
<script src="js/element-ui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            form: {
                dbType: "MYSQL",
				host: "127.0.0.1",
				port: "3306",
				dbName: "",
				userName: "root",
				password: "",
				pageSize: "10 ",
				page: 1,
				queryTableName: ''
            },
			dialogVisible: false,
			total: 0,
			tableData: [],
			selectTables: [],
			generateConfig: {
				packageName: '',
				moduleName: '',
				tablePrefix: '',
				author: ''
			}
        },
		methods: {
			dbTypeChange: function(value) {
				if (value == "MYSQL") {
					this.form.port = "3306"
				}
				if (value == "ORACLE") {
					this.form.port = "1521"
				}
			},
			searchTables: function() {
				this.query(this.form.page)
			},
			query: function(page) {
				let that = this
				that.form.page = page
				axios.post('/list', that.form).then(function(response) {
					if (response && response.status == 200) {
						let data = response.data
						that.total = data.count
						that.tableData.splice(0, that.tableData.length)
						for (let i = 0; i < data.list.length; i++) {
							that.tableData.push(data.list[i])
						}
					}
				})
			},
			currentPageChange: function(page) {
				this.query(page)
			},
			selectionChange: function(selection) {
				this.selectTables = [];
				for (let i = 0; i < selection.length; i++) {
					this.selectTables.push(selection[i].tableName)
				}
				console.log(this.selectTables)
			},
			generateCode: function() {
				let param = {}
				param.queryBo = this.form
				param.tableNames = this.selectTables
				param.generateConfig = this.generateConfig
				axios.post("/code", param, {responseType: 'blob'})
				.then(response => {
					var blob = new Blob([response.data])
					var downloadElement = document.createElement('a');
					var href = window.URL.createObjectURL(blob); //创建下载的链接
					downloadElement.href = href;
					let fileName = 'code.zip'
					downloadElement.download = fileName
					document.body.appendChild(downloadElement)
					downloadElement.click()
					document.body.removeChild(downloadElement)
					window.URL.revokeObjectURL(href)
				})
			}
		}
    });
</script>
</body>
</html>